<template>
	<view class="uni_box home">
		<navbar title='工作时间设置'>
		</navbar>
		<view class="content">
			<view class="gone">
				<view class="ghead">
					<text class="gname">工作时间</text>
					<!-- <image class="icon_gd ml" src="@/pages_admin/static/icon_gd.png" /> -->
				</view>
				<view class="gtimes">
					<!-- <view class="grone">
							<text class="stime">03-10 10:00 至 03-10 14:00</text>
							<text class="gong ml">共4小时</text>
						</view> -->
					<view class="ztwo">
						<view class="ghead">
							<text class="shiname">{{dayinfo.startday&&dayinfo.endday?dayinfo.startday+'至'+dayinfo.endday:'请选择'}}</text>
							<!-- <image class="icon_gd ml" src="@/pages_admin/static/icon_gd.png" /> -->
						</view>
						<view class="shinav">
							<view class="shileft" @click="gettian(1)">
								<text class="kname">开工时间</text>
								<text class="ktime">{{dayinfo.starthour?dayinfo.starthour:'请选择'}}</text>
							</view>
							<view class="shilian">
								<view class="lianone">
									<image class="bg" src="@/pages_admin/static/shilianicon.png" />
									<view class="ltxt">
										工作时长
									</view>
								</view>
								<text class="gong" v-if="dayinfo.gtime">共{{dayinfo.gtime}}小时</text>
							</view>
							<view class="shileft" @click="gettian(2)">
								<text class="kname">工作结束时间</text>
								<text class="ktime">{{dayinfo.endhour?dayinfo.endhour:'请选择'}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="xiuxi" v-for="(item,index) in dayinfo.break" :key="index">
				
				<view class="xiuitem">
					<text class="xname">休息时段{{ index+1 }}</text>
					<view class="xright ml" @click.stop="del(index)">
						<image class="icon_sc" src="@/pages_admin/static/icon_sc.png" />
						<text class="del">删除</text>
					</view>
				</view>
				<view class="xiuitem xiuitemtwo">
					<view class="xiuhead">
						<text class="xname">休息时间</text>
						<view class="xright ml">
							<text class="time">{{item.startday&&item.endday?item.startday+'至'+item.endday:'请选择'}}</text>
							<!-- <image class="icon_gd" src="@/pages_admin/static/icon_gd.png" /> -->
						</view>
					</view>
					<view class="ztwo mt-2">
						<view class="shinav">
							<view class="shileft" @click="gettiantwo(index,3)">
								<text class="kname">起始时间</text>
								<text class="ktime">{{item.starthour?item.starthour:'请选择'}}</text>
							</view>
							<view class="shilian">
								<view class="lianone">
									<image class="bg" src="@/pages_admin/static/shilianicon.png" />
									<view class="ltxt">
										休息时长
									</view>
								</view>
								<text class="gong" v-if="item.gtime">共{{item.gtime}}小时</text>
							</view>
							<view class="shileft" @click="gettiantwo(index,4)">
								<text class="kname">结束时间</text>
								<text class="ktime">{{item.endhour?item.endhour:'请选择'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tian" @click="addtime">
				<image class="icon_tj" src="@/pages_admin/static/icon_tj.png" />
				<text>添加休息时段</text>
			</view>

			<!-- <view class="yqda">
				<view class="daone">
					<view class="daleft">
						<text class="daname">要求员工打卡4次/天</text>
						<text class="damiao">每次休息上班都打卡</text>
					</view>
					<u-switch class="ml" size="40" v-model="checked" active-color="#FF4D43"></u-switch>
				</view>
			</view> -->
		</view>
		<view class="newbot">
			
			<view class="botview">
				<view class="lianxi"  @click="gettijiao">
					<text class="lname">提交</text>
				</view>
			</view>
		</view>

		<u-picker mode="time" v-model="timeshow" :params="params" @confirm="confirm"></u-picker>
		<u-picker mode="time" v-model="shishow" :params="params" @confirm="confirm" :min="minTime"
		:max="maxTime"></u-picker>
</view>
</template>

<script>
export default {
	data() {
		return {
			timeshow:false,
			params: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			},
			paramsday: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			paramshour: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			},
			checked:true,
			from:{
				work_end_time:'',
				work_start_time:'',
				break:[
					// {
					// 	startday:'',
					// 	starthour:'',
					// 	endday:'',
					// 	endhour:'',
					// }
				]
			},
			riqi:'',
			htype:1,//1开始 2结束
			startday:'',
			starthour:'',
			endday:'',
			endhour:'',
			gtime:'',
			xtime:'',//最后减去休息时间的time
			breakindex:'',
			shishow:false,
			// 转换后的最小时间
			minTime: '',
			// 转换后的最大时间
			maxTime: '',
			dayinfo:{
				startday:'',
				starthour:'',
				endday:'',
				endhour:'',
				gtime:'',
				break:[],
				xtime:''
			}
		}
	},
	onLoad(option) {
		if(option.dayinfo){
			this.dayinfo = JSON.parse(option.dayinfo)
		}
	},
	onShow() {
	},
	methods: {
		gettian(e){
			this.htype = e
			if(e == 2){
				if(!this.dayinfo.startday){
					this.$u.toast("请先选择开始时间");
					return;
				}
			}
			this.params = this.paramsday
			this.timeshow = true
		},
		isDate1GreaterOrEqual(dateStr1, dateStr2) {
			const date1 = new Date(dateStr1);
			const date2 = new Date(dateStr2);
			return date1 > date2;
		},
		confirm(e){
			console.log(e)
			if(this.htype == 1){
				this.dayinfo.startday = e.year+'-'+e.month+'-'+e.day
				this.dayinfo.starthour = e.hour+':'+e.minute
			}else if(this.htype == 2){
				console.log(this.isDate1GreaterOrEqual(e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute,this.dayinfo.startday+' '+this.dayinfo.starthour))
				if(this.isDate1GreaterOrEqual(e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute,this.dayinfo.startday+' '+this.dayinfo.starthour)){
					this.dayinfo.endday = e.year+'-'+e.month+'-'+e.day
					this.dayinfo.endhour = e.hour+':'+e.minute
				}else{
					this.$u.toast("结束时间不得小于开始时间");
					return;
				}
				
			}else if(this.htype == 3){
				if(this.isInRange(e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute)){
					let newbreak = this.dayinfo.break
					newbreak[Number(this.breakindex)].startday = e.year+'-'+e.month+'-'+e.day
					newbreak[Number(this.breakindex)].starthour = e.hour+':'+e.minute
					this.dayinfo.break = newbreak
				}else{
					this.$u.toast("休息时间需在开始结束时间范围内");
					return;
				}
				
			}else if(this.htype == 4){
				if(this.isInRange(e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute)){
					let newbreak = this.dayinfo.break
					newbreak[Number(this.breakindex)].endday = e.year+'-'+e.month+'-'+e.day
					newbreak[Number(this.breakindex)].endhour = e.hour+':'+e.minute
					this.dayinfo.break = newbreak
				}else{
					this.$u.toast("休息时间需在开始结束时间范围内");
					return;
				}
				
			}
			this.getjiancetime()
		},
		isInRange(dateString) {
			// 将字符串转换为日期对象
			let startDateString = this.dayinfo.startday+' '+this.dayinfo.starthour
			let endDateString = this.dayinfo.endday+' '+this.dayinfo.endhour
			const date = new Date(dateString);
			const startDate = new Date(startDateString);
			const endDate = new Date(endDateString);
		
			// 确保日期有效
			if (isNaN(date) || isNaN(startDate) || isNaN(endDate)) {
				return false;
			}
		
			// 判断是否在范围内
			return date >= startDate && date <= endDate;
		},
		
		// // 示例使用
		// const dateToCheck = "2023-04-01 12:00"; // 要检查的日期时间
		// const startDate = "2023-04-01 08:00";   // 时间范围开始
		// const endDate = "2023-04-01 16:00";     // 时间范围结束
		
		// console.log(isInRange(dateToCheck, startDate, endDate)); // 输出：true 或 false

		getjiancetime(){
			if(this.htype == 1 || this.htype==2){
				if(this.dayinfo.starthour&&this.dayinfo.endhour){
					this.dayinfo.gtime = this.alculateHoursBetweenDates(this.dayinfo.startday+' '+this.dayinfo.starthour,this.dayinfo.endday+' '+this.dayinfo.endhour).toFixed(1)
				}
			}else if(this.htype == 3||this.htype == 4){
				let newbreak = this.dayinfo.break
				if(newbreak[Number(this.breakindex)].starthour&&newbreak[Number(this.breakindex)].endhour){
					newbreak[Number(this.breakindex)].gtime = this.alculateHoursBetweenDates(newbreak[Number(this.breakindex)].startday+' '+newbreak[Number(this.breakindex)].starthour,newbreak[Number(this.breakindex)].endday+' '+newbreak[Number(this.breakindex)].endhour).toFixed(1)
				}
				this.dayinfo.break = newbreak
			}
			
		},
		alculateHoursBetweenDates(time1, time2) {
			// 将字符串解析为 Date 对象
			const date1 = new Date(time1.replace(' ', 'T'));
			const date2 = new Date(time2.replace(' ', 'T'));

			// 计算时间差（毫秒）
			const timeDiff = Math.abs(date2.getTime() - date1.getTime());

			// 将时间差转换为小时数
			const hoursDiff = timeDiff / (1000 * 60 * 60);

			return hoursDiff;
		},
		del(index){
			let newbreak = this.dayinfo.break
			newbreak.splice(index,1)
			this.dayinfo.break = newbreak
			this.$forceUpdate()
		},
		addtime(){
			if(!this.dayinfo.gtime){
				this.$u.toast("请选择工作时间");
				return;
			}
			let newbreak = this.dayinfo.break
			let parms = {
				startday:'',
				starthour:'',
				endday:'',
				endhour:'',
				gtime:''
			}
			newbreak.push(parms)
			this.dayinfo.break = newbreak
		},
		gettiantwo(index,type){
			if(!this.dayinfo.startday){
				this.$u.toast("请先选择开始时间");
				return;
			}
			if(!this.dayinfo.endday){
				this.$u.toast("请先选择结束时间");
				return;
			}
			this.breakindex = index
			this.htype = type
			this.params = this.paramsday
			this.minTime = this.convertTimeToISO(this.dayinfo.startday+' '+this.dayinfo.starthour);
			this.maxTime = this.convertTimeToISO(this.dayinfo.endday+' '+this.dayinfo.endhour);
			this.shishow = true
			console.log(this.minTime)

		},
		convertTimeToISO(timeStr) {
			// 将年-月-日 时:分格式的字符串转换为Date对象
			const [date, time] = timeStr.split(' ');
			const [year, month, day] = date.split('-');
			const [hour, minute] = time.split(':');
			const dateObj = new Date(+year, +month - 1, +day, +hour, +minute);
			// 将Date对象转换为ISO 8601格式的字符串
			return dateObj.toISOString();
		},
		gettijiao(){
			let xtime = this.dayinfo.gtime
			let breaktime = this.dayinfo.break
			let totalxiutime = 0
			if(breaktime){
				for(let i in breaktime){
					totalxiutime=Number(breaktime[i].gtime)+Number(totalxiutime)
				}
				// console.log(totalxiutime)
				xtime = Number(this.dayinfo.gtime)-Number(totalxiutime)
			}
			console.log(JSON.stringify({
				startday:this.dayinfo.startday,
				starthour:this.dayinfo.starthour,
				endday:this.dayinfo.endday,
				endhour:this.dayinfo.endhour,
				gtime:this.dayinfo.gtime,
				break:this.dayinfo.break,
				xtime:xtime
			}))
			
			//点击确定 携带参数返回
			uni.$emit('isRefreshtime',{
				startday:this.dayinfo.startday,
				starthour:this.dayinfo.starthour,
				endday:this.dayinfo.endday,
				endhour:this.dayinfo.endhour,
				gtime:this.dayinfo.gtime,
				break:this.dayinfo.break,
				xtime:xtime
			})
			uni.navigateBack({
				delta: 1
			})
		}

	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}

.content {
	background-color: #f5f5f5;
	padding: 30rpx 30rpx 120rpx;

	.gone {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		display: flex;
		flex-direction: column;

		.ghead {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			margin-bottom: 15rpx;
		}

		// align-items: center;
		.gname {
			font-weight: 800;
			font-size: 28rpx;
			color: #111111;
		}

		.gright {
			margin-left: auto;
			display: flex;
			align-items: center
		}

		.icon_gd {
			margin-left: auto;
			width: 24rpx;
			height: 24rpx;
		}

		.gtimes {
			margin-top: 15rpx;
		}

		.grone {
			display: flex;
			flex-direction: row;
			align-items: center;

			.stime {
				font-weight: 500;
				font-size: 28rpx;
				color: #333;
			}

			.gong {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: block;
				text-align: center;
			}
		}
	}
}

.ztwo {
	background: #F5F5F5;
	border-radius: 10rpx;
	padding: 20rpx 20rpx;
	// margin-top: 20rpx;
	display: flex;
	flex-direction: column;

	.shiname {
		font-weight: 400;
		font-size: 30rpx;
		color: #111111;
		display: block;
		// margin-bottom: 14rpx;
	}
}

.shinav {
	display: flex;
	flex-direction: row;
	align-items: center;

	.shileft {
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// width: 42%;
		flex: 1;
		height: 130rpx;

		.kname {
			color: #333;
			font-size: 25rpx;
			font-weight: 400;
		}

		.ktime {
			font-weight: 500;
			font-size: 38rpx;
			color: #111111;
		}
	}

	.shilian {
		display: flex;
		flex-direction: column;
		width: 180rpx;
		margin: 0 15rpx;
		justify-content: center;
		align-items: center;

		.lianone {
			position: relative;
			width: 100%;
			height: 37rpx;

			.ltxt {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 20rpx;
				color: #FF653F;
			}
		}

		.gong {
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-top: 10rpx;
			display: block;
			text-align: center;
		}
	}
}
.xiuxi{
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	.xiuitem{
		padding: 30rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		.xname{
			font-weight: 800;
			font-size: 28rpx;
			color: #111111;
		}
		.xright{
			display: flex;
			flex-direction: row;
			align-items: center;
			.del{
				font-weight: 500;
				font-size: 28rpx;
				color: #FF1E1E;
			}
			.icon_sc{
				margin-right: 9rpx;
				width: 36rpx;
				height: 36rpx;
			}
			.time{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			.icon_gd{
				margin-left: 20rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.xiuitemtwo{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
}
.yqda{
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	margin-top: 30rpx;
	.daone{
		display: flex;
		flex-direction: row;
		align-items: center;
		.daleft{
			display: flex;
			flex-direction: column;
			.daname{
				font-weight: 800;
				font-size: 28rpx;
				color: #111111;
			}
			.damiao{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}
.tian{
	height: 120rpx;
	background: #FFFFFF;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text{
		font-weight: 800;
		font-size: 28rpx;
		color: #FF5F40;
	}
	.icon_tj{
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}
}
.xiuhead{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}
.mt-2{
	margin-top: 20rpx;
	width: 100%;
}
.newbot{
	display: flex;
	flex-direction: column;
	// height: 200rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
}
.botview{
			height: 120rpx;
			background: #FFFFFF;
			width: 100%;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 10;
			// border-top: 1rpx solid #eee;
			padding: 0 30rpx 20rpx 30rpx;
			.botleft{
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.icon_fenxiang{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 5rpx;
				}
				text{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666;
				}
			}
			.lianxi{
				margin-left: auto;
				width: 100%;
				height: 90rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				.lname{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.lmiao{
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
			.liantwo{
				display: flex;
				flex-direction: row;
				flex: 1;
				.qubtn{
					height: 90rpx;
					width: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F5F5F5;
					border-radius: 45rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.queren{
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					color: #fff;
					margin-left: auto;
				}
			}
		}
</style>
